<template>
  <div class="header">
    <span @click="toggle" style="cursor: pointer;">
    <el-icon-expand v-if="collapse" class="icon"></el-icon-expand>
    <el-icon-fold v-else class="icon"></el-icon-fold>
  </span>
  </div>
</template>

<script setup lang="ts">
let props = defineProps<{collapse: boolean}>()
let emits = defineEmits(['update:collapse'])
const toggle = () => emits('update:collapse',!props.collapse)
</script>

<style lang="scss" scoped>
.icon {
  width: 1em; 
  height: 1em; 
  margin-right: 10px;
}

.header {
  height: 60px;
  padding:  0 20px;
  display: flex;
  align-items: center;
}
</style>